<template>
  <div>
    <h2>用户管理</h2>

    <!-- 筛选按钮组 -->
    <el-radio-group v-model="filterType" size="small" style="margin-bottom: 16px;">
      <el-radio-button label="admin">管理员</el-radio-button>
      <el-radio-button label="all">全部用户</el-radio-button>
      <el-radio-button label="pending">待批准用户</el-radio-button>
    </el-radio-group>

    <!-- 用户表格 -->
    <el-table :data="filteredUsers" border style="width: 100%">
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="type" label="用户类型">
        <template #default="{ row }">
          <el-tag v-if="row.type === 1" type="info">管理员</el-tag>
          <el-tag v-else-if="row.type === 2" type="success">普通用户</el-tag>
          <el-tag v-else-if="row.type === 3" type="warning">待批准</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template #default="{ row }">
          <el-button size="small" @click="confirmReset(row)">重置密码</el-button>
          <el-button
            v-if="row.type === 3"
            size="small"
            type="success"
            @click="confirmApprove(row)"
          >批准</el-button>
          <el-button
            v-if="row.type !== 1"
            size="small"
            type="danger"
            @click="confirmDelete(row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import {
  getUserList,
  deleteUser,
  upgradeToCreator,
  resetUserPassword
} from '@/api/user'

interface User {
  id: number
  username: string
  type: number
}

const userList = ref<User[]>([])
const filterType = ref<'admin' | 'all' | 'pending'>('all')

const filteredUsers = computed(() => {
  switch (filterType.value) {
    case 'admin':
      return userList.value.filter(u => u.type === 1)
    case 'pending':
      return userList.value.filter(u => u.type === 3)
    default:
      return userList.value.filter(u => u.type === 2)
  }
})

onMounted(async () => {
  try {
    const res = await getUserList()
    if (res.code === 0 && Array.isArray(res.data)) {
      userList.value = res.data.map(u => ({
        id: u.id,
        username: u.user_name,
        type: u.type
      }))
    } else {
      ElMessage.error('用户数据获取失败')
    }
  } catch {
    ElMessage.error('请求失败')
  }
})

function confirmReset(user: User) {
  ElMessageBox.confirm(`重置「${user.username}」的密码？`, '确认操作')
    .then(async () => {
      await resetUserPassword(user.id)
      ElMessage.success(`已重置 ${user.username} 密码`)
    })
    .catch(() => {})
}

function confirmApprove(user: User) {
  ElMessageBox.confirm(`批准「${user.username}」成为创作者？`, '确认操作')
    .then(async () => {
      await upgradeToCreator(user.id)
      user.type = 2
      ElMessage.success(`已批准「${user.username}」`)
    })
    .catch(() => {})
}

function confirmDelete(user: User) {
  ElMessageBox.confirm(`删除用户「${user.username}」？`, '确认删除')
    .then(async () => {
      await deleteUser(user.id)
      userList.value = userList.value.filter(u => u.id !== user.id)
      ElMessage.success(`已删除「${user.username}」`)
    })
    .catch(() => {})
}
</script>
